﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <link href="../Public/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /*基础样式*/
        * {
            font-family: "微软雅黑", "宋体", Arial;
        }
        p, h1, h2, h3, h4, h5, h6 {
            padding: 0;
            margin: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
        }
        html {
            display: table;
            min-width: 320px;
            padding-top: 70px;
        }
        body {
            display: table-cell;
            vertical-align: middle;
            overflow: auto;
        }
        a{
            text-decoration: none;
        }
        /*导航栏*/
        #header {
            background: rgba(12, 175, 213, 0.82);
            text-align: center;
            color: white;
            line-height: 50px;
            height: 50px;
            margin: 0;
            font-size: 1.6em;
        }
        #nav{

        }
        #nav li{
            width: 50%;
            background: transparent;
        }
        #nav .active a{
            color: #155fb8;
            border-bottom: 3px solid rgba(12, 175, 213, 0.82);
        }
        #nav li a{
            font-size: 0.8em;
            color: rgba(21, 95, 184, 0.29);
            margin: 0;
            background: transparent;
            border: 0;
        }
        .nav-tabs>li>a:hover{
            color: white;
            background: transparent;
            border: none;
        }
        #container{
            margin-top: 50px;
        }
        /*标题样式*/
        #logo {
            text-align: center;
            font-size: 3em;
        }
        #title {
            font-size: 1em;
            text-align: center;
        }
        .tips{
            text-align: right;
            font-size: 0.8em;
            color: #373737;
            margin-top: 3px;
        }
        #tips a{
            color: #1978e4;
            text-decoration: none;
        }

        /*表单样式*/
        .form{
            margin-top: 20px;
        }
        .form-item{
            padding: 5px 15px;
            border-bottom: 2px solid #a0a0a0;
            margin: 10px 0;
            border-radius: 5px;
        }
        .form-item:hover{
            border-bottom: 2px solid #6196d8;
        }
        .form-item:hover span{
            color: #292929;
        }
        .form-item:hover input{
            color: #292929;
        }
        .form-item:hover .btn-adjust{
            border: 2px solid #3a87d8;
            color: #3a87d8;
        }
        .form-item input {
            width: 80%;
            outline:none;
            margin-left: 10px;
            letter-spacing:1.2px;
        }
        .form-item span{
            padding: 0px 5px;
        }
        .input-item {
            height: 2em;
            line-height: 2em;
            font-size: 1.2em;
            border: 0;
            color: #a0a0a0;
        }
        @media screen and (max-width: 1000px) {
            #code{
                width: 60%;
            }
        }
        @media screen and (max-width: 500px) {
            #code{
                width: 45%;
            }
        }
        .btn-adjust {
            width: 100px;
            height: 3.4em;
            padding: 0 16px;
            font-size: 0.8em;
            float: right;
            margin-top: -0.5em;
            margin-right: -0.5em;
            background: white;
            border: 2px solid #a0a0a0;
            color: #a0a0a0;
        }
        #forget{
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            color: white;
            position: absolute;
            top: 0;
            right: 10px;
            z-index: 1200;
            text-decoration: none;
        }
        .submit {
            margin-top: 20px;
            width: 100%;
            background: rgba(12, 175, 213, 0.82);
            color: white;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
<header id="header" class="navbar navbar-fixed-top">
    <p>登录</p>
    <a href="#" id="forget">忘记密码</a>
    <ul class="nav nav-tabs" id="nav" role="tablist">
        <li role="presentation" class="active"><a href="#normal" aria-controls="normal" role="tab" data-toggle="tab">普通登录</a></li>
        <li role="presentation"><a href="#fast" aria-controls="fast" role="tab" data-toggle="tab">快速登录</a></li>
    </ul>
</header>
<div class="container" id="container">
    <p id="logo">CloudParking</p>
    <p id="title">为你提供最优质的车位选择！</p>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="normal">
            <form class="form" action="order_list.html" enctype="multipart/form-data" method="post">
                <div class="form-item">
                    <label for="mobile"><span class="glyphicon glyphicon-phone input-item"></span></label>
                    <input class="input-item" id="username" type="text" placeholder="用户名" name="username" autocomplete="off" required maxlength="11">
                </div>
                <div class="form-item">
                    <label for="code"><span class="glyphicon glyphicon-link input-item"></span></label>
                    <input class="input-item" id="password" type="password" placeholder="密码" name="password" autocomplete="off" required maxlength="4">
                </div>
                <input class="btn center-block submit" type="submit" value="登录">
            </form>
        </div>
        <div role="tabpanel" class="tab-pane" id="fast">
            <form class="form" action="order_list.html" enctype="multipart/form-data" method="post">
            <div class="form-item">
                <label for="mobile"><span class="glyphicon glyphicon-phone input-item"></span></label>
                <input class="input-item" id="mobile" type="text" placeholder="手机号" name="mobile" autocomplete="off" required maxlength="11">
            </div>
            <div class="form-item">
                <label for="code"><span class="glyphicon glyphicon-link input-item"></span></label>
                <input class="input-item" id="code" type="text" placeholder="验证码" name="code" autocomplete="off" required maxlength="4">
                <button class="btn btn-adjust" id="codes" type="button">获取验证码</button>
            </div>
                <input class="btn center-block submit" type="submit" value="快速登录">
            </form>
        </div>
        <p class="tips">没有账号？<a href="index.html">立即注册>></a></p>
    </div>


</div>
</body>
<script type="text/javascript" src="../Public/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../Public/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    <!-- 获取验证码-->
    $("#codes").on("click",function(){
        var object = $(this);
        var time_length = 30;
        object.attr("disabled", "disabled");
        var interval = setInterval(time_count, 1000);
        function time_count() {
            time_length--;
            object.html(time_length + "秒后<br/>重新获取");
            if (time_length <= 0) {
                clearInterval(interval);
                object.text("获取验证码");
                object.removeAttr("disabled");
            }
        }
    });
</script>
</html>
